<template>
  <div>
    <el-input class="search" v-model="input" :placeholder="input"  @keyup.native.13="handlehotwrods"
     @dblclick.native="handlehotwrods"></el-input>
     <div class="wrap">
        <div class="innerwrap">
          <!-- <ul class="hotwords" v-show="IsShow" v-for="item in blogsHotWrods">
            <li>{{item.title}}</li>
          </ul> -->
          <div class="hotwords" v-show="IsShow" v-for="item in blogsHotWrods">
               <!--  <list :cities="{dssf: dsfs}"></list>    -->
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {
        mapState,
        mapMutations
    } from 'vuex'
    import list from './components/list'
    export default {
        props: {
            blogsHotWrods: Array
        },
        name: "search",
        data() {
            return {
                blogs: {},
                currentPage: 1,
                total: 0,
                pageSize: 5,
                placeholderText:"请输入搜索内容",
                input: '请输入搜索内容',
                IsShow: false
            }
        },
        computed: {
            ...mapState(['city'])
        },
        components: {
            list
        },
        methods: {
            ...mapMutations(['changeCity']),       //Mutate
            handleChangeCity(city) {
                this.changeCity(city)
                },
            handlehotwrods() {
                this.handleChangeCity(this.input)
                this.$router.push('/list')
            },
            handleIsShow() {
                this.IsShow = !this.IsShow
            }
        },
        mounted() {
            this.input=this.$router.app.$store.state.city
            console.log('this.$router.app.$store.state.city:'+this.$router.app.$store.state.city)
        }
    }
</script>

<style scoped>
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: #bbb
    }
    
    ul li {
        width: 630px;
    }
    
    .wrap {
        position: relative;
        top: 0;
        left: 0;
    }
    
    .innerwrap {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    
    .search {
        display: block;
        margin: 0 auto;
    }
</style>